<template>
  <div class="container">
    <!-- 卡片区域 -->
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <!-- 面包屑 -->
        <el-breadcrumb separator="/" class="breadCrumbs">
          <el-breadcrumb-item :to="{ path: '/' }">学科管理</el-breadcrumb-item>
          <el-breadcrumb-item
            ><a href="/">{{ this.name }}</a></el-breadcrumb-item
          >
          <el-breadcrumb-item>目录管理</el-breadcrumb-item>
        </el-breadcrumb>
      </div>

      <!-- 目录名称 -->
      <el-form
        :inline="true"
        :model="querInfo"
        ref="directorysFormRef"
        class="demo-form-inline"
      >
        <div>
          <el-form-item
            label="目录名称"
            class="directoryName"
            prop="directoryName"
          >
            <el-input v-model="querInfo.directoryName"></el-input>
          </el-form-item>
          <el-form-item label="状态" class="state" prop="state">
            <el-select v-model="querInfo.state" placeholder="请选择">
              <el-option label="已启用" value="1"></el-option>
              <el-option label="已禁用" value="0"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button @click="remove">清除</el-button>
            <el-button type="primary" @click="search">搜索</el-button>
          </el-form-item>
        </div>
        <div>
          <el-form-item>
            <div>
              <span
                v-if="this.$route.query.id"
                @click="$router.back()"
                class="backDiscipline"
              >
                <i class="el-icon-back" />返回学科</span
              >
              <el-button
                type="success"
                class="el-icon-edit"
                @click="addDirectorysVisible = true"
                >新增目录</el-button
              >
            </div>
          </el-form-item>
        </div>
      </el-form>

      <!-- 数据 -->
      <el-alert :title="'一共有' + count + '条数据'" show-icon type="info">
      </el-alert>

      <!-- 表格 -->
      <el-table :data="tableData" style="width: 100%">
        <el-table-column type="index" label="序号" width="180">
        </el-table-column>
        <el-table-column prop="subjectName" label="所属学科" width="180">
        </el-table-column>
        <el-table-column prop="directoryName" label="目录名称" width="180">
        </el-table-column>
        <el-table-column prop="username" label="创建者"> </el-table-column>
        <el-table-column label="创建日期"
          ><template slot-scope="scope">
            {{
              scope.row.addDate | parseTimeByString("{y}-{m}-{d} {h}:{i}:{s}")
            }}
          </template></el-table-column
        >
        <el-table-column prop="subjectID" label="面试题数量"> </el-table-column>
        <el-table-column label="状态">
          <template slot-scope="scope">
            <span v-if="scope.row.state === 1">已启用</span>
            <span v-else>已禁用</span>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <!-- 已启用状态 -->
            <div v-if="scope.row.state === 1">
              <button
                class="skyblue"
                @click="editState(scope.row.id, scope.row.state)"
              >
                禁用
              </button>
              <button disabled>修改</button>
              <button disabled>删除</button>
            </div>
            <!-- 未启用状态 -->
            <div v-else>
              <button
                class="skyblue"
                @click="editState(scope.row.id, scope.row.state)"
              >
                启用
              </button>
              <button class="skyblue">修改</button>
              <button class="skyblue" @click="deleteDirectory(scope.row)">
                删除
              </button>
            </div>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页功能 -->
      <div class="paging">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="this.querInfo.page"
          :page-sizes="[1, 2, 5, 10]"
          :page-size="this.querInfo.pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="count"
        >
        </el-pagination>
      </div>
    </el-card>

    <!-- 新增目录对话框 -->
    <el-dialog
      title="提示"
      :visible.sync="addDirectorysVisible"
      width="30%"
      @close="closeaddDirectorysVisible"
    >
      <!-- 从学科进入的新增学科表单 -->
      <el-form
        v-if="this.$route.query.id"
        ref="form"
        :model="addDirectory"
        label-width="80px"
      >
        <el-form-item label="活动名称">
          <el-input v-model="addDirectory.discipline"></el-input>
        </el-form-item>
      </el-form>

      <!-- 从菜单进入的新增学科表单 -->
      <el-form
        v-else
        ref="addDirectoryFormRef"
        :rules="addDirectoryRules"
        :model="addDirectory"
        label-width="140px"
      >
        <el-form-item label="所属学科">
          <el-select
            class="width300"
            v-model="addDirectory.subjectID"
            placeholder="请选择学科"
          >
            <el-option
              v-for="item in subjectList"
              :key="item.id"
              :label="item.subjectName"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="directoryName" label="目录名称">
          <el-input
            class="width300"
            v-model="addDirectory.directoryName"
            @keyup.enter.native="addDirectorys"
          ></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addDirectorysVisible = false">取 消</el-button>

        <el-button type="primary" @click="addDirectorys">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { list, remove, add, changeState } from '@/api/hmmm/directorys'
import { list as subjects } from '@/api/hmmm/subjects'
export default {
  data () {
    return {
      id: this.$route.query.id,
      name: this.$route.query.name,
      // 目录名称表单
      formInline: {
        directoryName: '',
        state: ''
      },
      // 表格数据
      tableData: [],
      // 请求表格参数
      querInfo: {
      // 列表当前页数
        page: 1,
        pagesize: 10,
        directoryName: null,
        state: null
      // 一页显示条数
      },
      count: 0,
      // 新增目录对话框
      addDirectorysVisible: false,
      // 新增目录表单数据
      addDirectoryForm: {},
      // 新增目录验证规则
      addDirectoryRules: {
        directoryName: [
          { required: true, message: '请输入目录名称', trigger: 'blur' },
          { min: 2, max: 20, message: '长度在 3 到 8 个字符', trigger: 'blur' }
        ]
      },
      // 学科列表
      subjectList: [],
      // 新增目录下拉选框数据
      addDirectory: {
        directoryName: '',
        subjectID: ''
      }
    }
  },

  created () {
    this.loadList()
    this.loadSubjectList()
  },
  methods: {
    // 清除按钮事件
    remove () {
      console.log(1)
      this.$refs.directorysFormRef.resetFields()
      this.search()
    },
    // 搜索事件
    async  search () {
      this.querInfo.page = 1
      const { data } = await list(this.querInfo)
      this.tableData = data.items
      this.count = data.counts
      console.log(data)
    },
    // 新增目录
    /*   addDirectory () {

    }, */
    // 初始化目录列表
    async loadList () {
      try {
        const { data } = await list(this.querInfo)
        this.tableData = data.items
        this.count = data.counts
      } catch (err) {
        console.log(err)
      }
    },
    // 分页显示数量改变
    handleSizeChange (newSize) {
      this.querInfo.pagesize = newSize
      this.loadList()
    },
    // 当前页事件
    handleCurrentChange (newPage) {
      this.querInfo.page = newPage
      this.loadList()
    },
    // 删除学科事件
    async deleteDirectory (id) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        remove(id)
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
        if (this.tableData.length === 1) {
          this.querInfo.page--
          this.count--
        }
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 关闭新增目录对话框事件
    closeaddDirectorysVisible () {
      this.$refs.addDirectoryFormRef.resetFields()
      this.addDirectory.subjectID = ''
    },
    // 获取学科列表
    async loadSubjectList () {
      try {
        const { data } = await subjects()
        this.subjectList = data.items
      } catch (err) {
        console.log(err)
      }
    },
    // 确认提交修改按钮
    async addDirectorys () {
      this.$refs.addDirectoryFormRef.validate(async valid => {
        if (!valid) return
        try {
          const { data } = await add(this.addDirectory)
          console.log(data)
          this.addDirectory.directoryName = ''
          this.addDirectorysVisible = false
          this.loadList()
        } catch (err) {
          console.log(err)
        }
      })
    },
    // 修改状态
    async editState (id, state) {
      try {
        if (state === 1) {
          await changeState({ id: id, state: 0 })
          this.loadList()
        } else if (state === 0) {
          await changeState({ id: id, state: 1 })
          this.loadList()
        }
      } catch (err) {
        console.log(err)
      }
    }
  }

}
</script>

<style scoped lang='less'>
.breadCrumbs {
  margin-left: 10px;
}
/deep/.el-breadcrumb__inner,
.el-breadcrumb__inner a {
  color: #606266;
}
.directoryName {
  margin-left: 10px;
}
/deep/.state {
  margin-left: 50px;
}
.backDiscipline {
  color: skyblue;
}
.demo-form-inline {
  display: flex;
  justify-content: space-between;
}
.el-table {
  margin-top: 20px;
}
/deep/.cell button {
  margin: 0 5px;
  border: 0;
  background-color: #fff;
}
.skyblue {
  color: skyblue;
}
.paging {
  margin-top: 10px;
  display: flex;
  justify-content: flex-end;
}
.addDirectoryInput {
  width: 300px;
}
.el-dialog,
.width300 {
  width: 300px;
}
</style>
